<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleCancel"
    :width="800"
    centered
    title="统计图表"
  ><echartsView :loading="loading" :options="options"></echartsView
  ></a-modal>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  inject: ['localDataSource', 'title'],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.$nextTick(() => {
          this.fetchData()
        })
      }
    }
  },
  computed: {
    chartData () {
      return this.localDataSource()
    }
  },
  data () {
    return {
      loading: false,
      options: {
        title: {
          text: '租赁补贴保障明细',
          left: '50%',
          top: '6%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['户数', '人数', '发放金额(万元)'],
          top: '14%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['本季度退出保障', '本季度新增纳入保障', '季度末正在实施保障']
        },
        series: [
          {
            name: '户数',
            type: 'bar',
            data: [0, 0, 0]
          },
          {
            name: '人数',
            type: 'bar',
            data: [0, 0, 0]
          },
          {
            name: '发放金额(万元)',
            type: 'bar',
            data: [0, 0, 0]
          }
        ]
      }
    }
  },
  methods: {
    fetchData () {
      this.loading = true
      this.options.title.text = this.title()
      const {
        QuarterProposer,
        QuarterDetail,
        QuarterMoney,
        QuarterNewProposer,
        QuarterNewDetail,
        QuarterNewMoney,
        QuarterExitProposer,
        QuarterExitDetail
      } = this.chartData
      this.options.series[0].data = [QuarterExitProposer, QuarterNewProposer, QuarterProposer]
      this.options.series[1].data = [QuarterExitDetail, QuarterNewDetail, QuarterDetail]
      this.options.series[2].data = [0, QuarterNewMoney, QuarterMoney]
      this.loading = false
    },
    hanldeAfterClose () {},
    close () {
      this.$emit('update:visible', false)
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>
<style scoped>
</style>
